<template>
    <basic-container>
        <div id="app">
            <el-form :inline="true" :model="formInline">
                <el-form-item label="系统类别">
                    <el-select v-model="menuType"    @change="onChange" placeholder="系统类别">
                        <el-option
                            v-for="item in menuTypes"
                            :key="item.key"
                            :value="item.key"
                            :label="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="avue-crud">
            <el-form :inline="true">
                <el-form-item>
                    <el-button v-if="true" icon="el-icon-plus" type="primary"
                                         @click="addOrUpdateHandle(false)">
                        添加
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table
                border
                v-loading="loading"

                :data="menuList"
                row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildrens'}">
                <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="180"></el-table-column>
                <el-table-column prop="parentIdLabel" label="父菜单ID" align="center" width="100"></el-table-column>
                <el-table-column prop="parentIdsLabel" label="所有的父ID" align="center" width="100"></el-table-column>
                <el-table-column prop="icon" label="图标" align="center" width="100">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"/>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" align="center" width="60"></el-table-column>
                <el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="type" label="类型" width="80" align="center">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.type === '0'">菜单</el-tag>
                        <el-tag type="info" v-if="scope.row.type === '1'">按钮</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="keepAlive" label="缓冲" width="80" align="center">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.keepAlive === '0'">关闭</el-tag>
                        <el-tag type="success" v-if="scope.row.keepAlive === '1'">开启</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isShow" label="显示/隐藏" width="80" align="center">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.isShow === '0' && scope.row.type !== '1'">显示</el-tag>
                        <el-tag type="success" v-if="scope.row.isShow === '1' && scope.row.type !== '1'">隐藏</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="permission" label="权限标识" width="120" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="delFlag" label="是否被删除" width="100" align="center">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.delFlag === false">正常</el-tag>
                        <el-tag type="success" v-if="scope.row.delFlag === true">删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createBy" label="创建者" width="80" align="center"></el-table-column>
                <el-table-column prop="createDate" label="创建时间" width="90" align="center"></el-table-column>
                <el-table-column prop="updateBy" label="修改者" width="80" align="center"></el-table-column>
                <el-table-column prop="updateDate" label="修改时间" width="90" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" width="80" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-plus"
                            @click="addOrUpdateHandle(false,scope.row.id)"
                            v-if="permissions.sys_menu_add">添加
                        </el-button>
                        <el-button type="text"
                                             icon="el-icon-edit"
                                             @click="addOrUpdateHandle(true,scope.row.id)"
                                             v-if="true">修改
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                            v-if="scope.row.name !== '菜单管理' && scope.row.name !== '字典管理'">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></table-form>
        </div>
    </basic-container>
</template>

<script>
    import {delObj, fetchMenuTree} from '@/api/admin/menu'
    import {getDictByType} from '@/api/admin/dict'
    import TableForm from './menu-form'
    import {mapGetters} from 'vuex'

    export default {
        name: "Menu",
        components: {TableForm},
        data() {
            return {
                addOrUpdateVisible: false,
                // 遮罩层
                loading: true,
                // 菜单表格树数据
                menuList: [],
                // 菜单树选项
                menuOptions: [],
                menuType: '',
                menuTypes: [],
                formInline: {
                    name: '',
                    type: '',
                    label: ''
                }
            };
        },
        created() {
            this.getList();
        },
        computed: {
            ...mapGetters(['permissions']),
        },
        methods: {
            addOrUpdateHandle(isEdit, id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(isEdit, id, this.menuType)
                })
            },
            getList(menuType) {
                this.loading = true;
                getDictByType("systemType").then(response => {
                    this.menuTypes = response.data.data;
                    this.menuType = this.menuTypes[0].key;
                    if(menuType !== undefined)
                        this.menuType = menuType;
                    fetchMenuTree(false,'',this.menuType).then(response => {
                        this.menuList = response.data.data
                        this.loading = false;
                    });
                });

            },
            onChange() {
                this.loading = true;
                fetchMenuTree(false,'',this.menuType).then(response => {
                    this.menuList = response.data.data
                    this.loading = false;
                });
            },
            handleDelete(row) {
                this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delObj(row.id);
                }).then(() => {
                    this.getList(this.menuType);
                    this.$message.success('删除成功');
                    // location.reload();
                })
            },

        }
    };
</script>
